<template>
    <div class="divBox">
      <el-card class="box-card">
        <div class="components-container">
          <el-form ref="pram" label-width="150px" :model="pram">
           <el-form-item label="区域：" prop="areaName" :rules="[{required:true, message:'请选择', trigger:['blur','change']}]">
              <el-select v-model="pram.areaName" placeholder="请选择">
                  <el-option
                    v-for="item in positions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

            </el-form-item>

            <el-form-item label="文案：">
              <el-input v-model="pram.name" placeholder="请输入显示文案" size="small" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="跳转类型：">
              <el-input v-model="pram.typeStr" disabled placeholder="请输入显示文案" size="small" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="跳转至商品分类：">
              <el-cascader v-model="pram.linkParam" :options="merCateList" :props="props" clearable class="mr20" @change="seachList" size="small"/>
            </el-form-item>

            <el-form-item label="图片：" prop="imgUrl" :rules="[{required:true, message:'请上传图片', trigger:['blur','change']}]">
                <div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
                  <div v-if="pram.imgUrl" class="pictrue"><img :src="pram.imgUrl"></div>
                  <div v-else class="upLoad">
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div>
              </el-form-item>

            <el-form-item label="顺序号：">
              <el-input v-model="pram.sort" placeholder="请输入顺序号" type="number" size="small" clearable>
              </el-input>
            </el-form-item>

           <el-form-item label="是否显示">
              <el-switch v-model="pram.isShow" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handerSubmit('pram')" v-hasPermi="['admin:banner:update','admin:banner:save']">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </template>

  <script>
  import Tinymce from '@/components/Tinymce/index'
  import * as pageManApi from '@/api/pagemanagement.js'
  import * as selfUtil from '@/utils/ZBKJIutil.js'
  import { fileImageApi } from '@/api/systemSetting'
  import { getToken } from '@/utils/auth'
  import {Debounce} from '@/utils/validate'
  import { categoryApi } from '@/api/store'
  export default {
  name: "CreatPorcelainArea",
    components: { Tinymce },
    data() {
      return {
        props: {
          children: 'child',
          label: 'name',
          value: 'id',
          emitPath: false
        },
        merCateList: [],
        isDisabled: this.$route.params.isDisabled==='1'?true:false,
        loading:false,
        constants: this.$constants,
        categoryTreeData: [],
        categoryProps: {
          value: 'id',
          label: 'name',
          children: 'child',
          expandTrigger: 'hover',
          checkStrictly: true,
          emitPath: false
        },

        positions: [{
            value: 'hotSale',
            label: '今日爆款'
          }, {
            value: 'newbornZone',
            label: '新人专区'
          },{
            value: 'dailyExplosive',
            label: '年度大促'
          },{
            value: 'activationZone',
            label: '激活专区'
          },{
            value: 'paiDouZone',
            label: '拍豆专区'
          },{
            value: 'giftBagZone',
            label: '礼包专区'
          }],


        pram: {
          areaName:null,
          isShow: null,
          id: null,
          imgUrl:null,
          typeStr: "商品分类跳转",
          type: 10
          // mediaId: null
        },
        editData: {},
        myHeaders: { 'X-Token': getToken() },
        editorContentLaebl:"",
        // basicForm:{editorContent:""}
      }
    },
    created() {
      this.tempRoute = Object.assign({}, this.$route)
    },
    mounted() {
      if(this.$route.params.id){
        // this.getInfo()
        // this.setTagsViewTitle()
      }
      this.getCategorySelect()
    },
    methods: {
      // 商户分类；
      getCategorySelect() {
        categoryApi({ status: -1, type: 1 }).then(res => {
          this.merCateList = res
        }).catch(res => {
          this.$message.error(res.message)
        })
      },
      getInfo (){
        pageManApi.InfoPorcelainArea({ "id": this.$route.params.id }).then(data => {
            this.editData = data
            this.hadlerInitEditData()
        })
      },
      hadlerInitEditData() {
        if (!this.$route.params.id) return
        const { areaName,
          isShow, imgUrl,id} = this.editData
        this.pram.areaName = areaName
        this.pram.isShow = isShow
        this.pram.imgUrl = imgUrl
        this.pram.id = id
        // this.pram.mediaId = mediaId
      },
      handerSubmit:Debounce(function(form) {
        this.$refs[form].validate(valid => {
          if (!valid) return
          this.handlerSave();
        })
      }),
      handlerUpdate() {
        this.loading = true
        pageManApi.UpdatePorcelainArea(this.pram).then(data => {
          this.$message.success('编辑瓷片成功')
          this.loading = false
          this.$router.push({ path: '/design/porcelainArea' });
        }).catch(()=>{
          this.loading = false
        })
      },
      handlerSave() {
        this.loading = true
        pageManApi.SaveJInggangArea(this.pram).then(data => {
          this.$message.success('操作成功')
          this.loading = false
          this.$router.push({ path: '/design/porcelainArea' });
        }).catch(()=>{
          this.loading = false
        })
      },
      setTagsViewTitle() {
        const title = '编辑文章'
        const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.$route.params.id}` })
        this.$store.dispatch('tagsView/updateVisitedView', route)
      },
       // 图片上传
        modalPicTap (tit, num, i,status) {
          const _this = this;
          if(_this.isDisabled) return;
          this.$modalUpload(function(img) {
            if(tit==='1'&& !num){
              _this.pram.imgUrl = img[0].sattDir

            }
          },tit, 'content')
        }
    }
  }
  </script>

  <style scoped lang="scss">
    .selWidth .el-input--small .el-input__inner{
      width: auto !important;
    }
  </style>
